import React from 'react';
import { Box, Typography, Container } from '@mui/material';
import IOSAppStoreCard from 'components/ui/IOSAppStoreCard';
import backgroundImage from 'images/background1.png';

const DemoPage = () => {
  return (
    <Container maxWidth="xl" sx={{ py: 6, minHeight: '100vh' }}>
      <Typography variant="h3" sx={{ mb: 4, fontWeight: 'bold', textAlign: 'center' }}>
        Card Animation Demo
      </Typography>
      
      <Box 
        sx={{ 
          display: 'flex', 
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          minHeight: '70vh'
        }}
      >
        <Box sx={{ width: '100%', maxWidth: 400, height: 280 }}>
          <IOSAppStoreCard
            image={backgroundImage}
            title="Demo Card"
            subtitle="Click to expand this beautiful demo"
            borderRadius={4}
            headerSize="h5"
            subHeaderSize="subtitle1"
            textColor="#ffffff"
            backdropColor="#121212"
            backdropOpacity={0.85}
          >
            <Typography variant="body2" sx={{ mb: 2, opacity: 0.9 }}>
              This is a demonstration of our interactive card component using Framer Motion animations and Material UI styling. Click anywhere to return to the original card view.
            </Typography>
          </IOSAppStoreCard>
        </Box>
      </Box>
    </Container>
  );
};

export default DemoPage;